<template>
  <div id="container">
    <div id="viewDiv"></div>
    <el-main  style="position:absolute;left:15px;top:15px;box-shadow:0 0 5px gray;background-color:white;width:480px;">
        <span style="font-size:18px;color: black;"><b>设置标注文本格式</b></span>
        <div style="width:100%;display:flex;flex-direction: row;align-items: center;margin-top:10px">
          <span>请选择调整标注样式的山峰类型:&nbsp;&nbsp;&nbsp;</span>
          <el-select style="width:150px;" v-model="山峰类型" @change="山峰类型_change">
            <el-option value="Climbed='No'" label="未登顶山峰"></el-option>
            <el-option value="Climbed='Yes'" label="已登顶山峰"></el-option>
          </el-select>
        </div>
        <div style="width:100%;display:flex;flex-direction: row;align-items: center;margin-top:10px">
            <span>背景颜色:&nbsp;&nbsp;&nbsp;</span>
            <el-color-picker color-format='rgb' v-model="背景颜色" :show-alpha="true" 
            :predefine="predefineColors" @change="背景颜色_change" ></el-color-picker>
            <span style="margin-left:15px;">边框颜色:&nbsp;&nbsp;&nbsp;</span>
            <el-color-picker color-format='rgb' v-model="边框颜色" :show-alpha="true" 
            :predefine="predefineColors" @change="边框颜色_change" ></el-color-picker>
            <span style="margin-left:15px;">文本颜色:&nbsp;&nbsp;&nbsp;</span>
            <el-color-picker color-format='rgb' v-model="文本颜色" :show-alpha="true" 
            :predefine="predefineColors" @change="文本颜色_change" ></el-color-picker>
        </div>

    </el-main>
  </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
import Legend from '@arcgis/core/widgets/Legend'
var map,view,要素图层,legend
const predefineColors = ref([//提供默认颜色
  '#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1', '#1e90ff', '#c71585',
])
const 山峰类型=ref("Climbed='Yes'")//山峰类型绑定变量,
const 山峰类型_change=()=>{//切换下拉菜单执行的方法,将标注符号中的相应颜色显示到对应的组件中
  for(let item of 要素图层.labelingInfo){
    if(item.where===山峰类型.value){
      文本颜色.value=`rgba(${item.symbol.color.r},${item.symbol.color.g},${item.symbol.color.b},${item.symbol.color.a})`   
      边框颜色.value=`rgba(${item.symbol.borderLineColor.r},${item.symbol.borderLineColor.g},${item.symbol.borderLineColor.b},${item.symbol.borderLineColor.a})`   
      背景颜色.value=`rgba(${item.symbol.backgroundColor.r},${item.symbol.backgroundColor.g},${item.symbol.backgroundColor.b},${item.symbol.backgroundColor.a})`
    }
  }
}
const 背景颜色=ref("rgba(0,128,0,0.1)")//背景颜色绑定变量
const 背景颜色_change=()=>{//改变背景颜色时执行的方法,这将修改标注文本相应元素的颜色
  for(let item of 要素图层.labelingInfo){
    if(item.where===山峰类型.value){
      item.symbol.backgroundColor=背景颜色.value
    }
  }
}
const 边框颜色=ref("rgba(0,128,0,1)")//背景颜色绑定变量
const 边框颜色_change=()=>{//改变背景颜色时执行的方法,这将修改标注文本相应元素的颜色
  for(let item of 要素图层.labelingInfo){
    if(item.where===山峰类型.value){
      item.symbol.borderLineColor=边框颜色.value
    }
  }
}
const 文本颜色=ref("rgba(0,128,0,1)")//背景颜色绑定变量
const 文本颜色_change=()=>{//改变背景颜色时执行的方法,这将修改标注文本相应元素的颜色
  for(let item of 要素图层.labelingInfo){
    if(item.where===山峰类型.value){
      item.symbol.color=文本颜色.value
    }
  }
}
onMounted(()=>{
  要素图层 = new FeatureLayer({//创建要素图层对象
    url:"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/128peaks/FeatureServer/0",
    title: "美国128座著名山峰",//设置了title后,图例向显示自定义title,否则将读取服务图层名称
    renderer: {//创建渲染器对象
        type: "unique-value",//类型为唯一值
        field: "Climbed",
        uniqueValueInfos: [{//设置唯一值信息.这是一个列表,列表的每个对象表示每种值对应的符号和图例名称
            value: "Yes",//字段属性值为"Yes"
            label: '已登顶山峰',
            symbol: {
                type: "simple-marker", 
                style: "triangle", 
                color: "green", 
                size: 16 
            }
        }, {
            value: "No",
            label: '未登顶山峰',
            symbol: {
                type: "simple-marker",
                style: "triangle",
                color: "red",
                size: 16
            }
        }]
    },
    labelingInfo: [{//创建标签信息对象,是一个列表,列表内的对象代表了不同的标注类
        where: "Climbed='Yes'", // 设置条件
        labelExpressionInfo: {//标注表达式
            expression: "$feature.Mountain_Peak" // arcade表达式
        },
        symbol: {//设置标注符号
            type: "text", 
            font: { 
                size: 8,
            },
            color: "rgba(0,128,0,1)", 
            borderLineColor:"rgba(0,128,0,1)", 
            backgroundColor:"rgba(0,128,0,0.2)", 
            haloColor:[255,255,255], 
            haloSize:1, 
        },
        labelPlacement: "center-right",//标注相对于图形的位置
        minScale: 10000000,//设置最小比例尺约束,小于该比例尺不再显示标注
    }, {
        where: "Climbed='No'",
        labelExpressionInfo: {
            expression: "$feature.Mountain_Peak + TextFormatting.NewLine + Concatenate([$feature.Elevation], '', \"##,###\") + ' ft'"
        },//TextFormatting.NewLine:换行符 Concatenate([$feature.Elevation], '', \"##,###\")表示格式化数值
        symbol: {
            type: "text", // 自动转换为 new TextSymbol()
            font: {
                size: 8,
            },
            color: "rgba(255,0,0,1)", 
            borderLineColor:"rgba(255,0,0,1)", 
            backgroundColor:"rgba(255,0,0,0.2)", 
            haloColor:[255,255,255],//晕圈颜色
            haloSize:1,//晕圈尺寸
        },
        labelPlacement: "center-right",
        minScale: 10000000,
    }]
  })
  map=new Map({
    basemap:"satellite",
    layers: [要素图层]
  })
  view = new MapView({
    map: map,  
    container: "viewDiv",
    zoom:5,
    center:[-100,35]
  })
  view.ui.remove(["zoom","attribution"])
  legend=new Legend({
    view:view
  })
  view.ui.add(legend,"bottom-left")
})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}
span{
  color: rgb(100,100,100);
}
</style>
  